<!--  -->
<template>
  <div class="guanli">
    <div class="nas">
      <div class="lef">
        <div class="block">
          <el-date-picker
            v-model="value2"
            type="datetimerange"
            :picker-options="pickerOptions"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right"
          >
          </el-date-picker>
        </div>
        <el-button type="primary">查询</el-button>
      </div>
      <div class="rgt">
        <el-button type="primary" plain>高级查询</el-button>
      </div>
    </div>
    <div class="bales">
      <el-table :data="tableData" style="width: 100%" max-height="470">
        <el-table-column fixed prop="num" label="消息数量" width="120"> </el-table-column>
        <el-table-column fixed prop="name" label="用户名" width="180"> </el-table-column>
        <el-table-column prop="peple" label="联系人" width="120"> </el-table-column>
        <el-table-column prop="phone" label="联系电话" width="180"> </el-table-column>
        <el-table-column prop="texts" label="留言内容" width="280"> </el-table-column>
        <el-table-column prop="datas" label="最后一次沟通时间" width="280"> </el-table-column>
        <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <el-button
              @click.native.prevent="deleteRow(scope.$index, tableData)"
              type="text"
              size="small"
            >
              添加线索
            </el-button>
            <!-- <el-button
              @click.native.prevent="deleteRow(scope.$index, tableData)"
              type="text"
              size="small"
            >
              移除
            </el-button> -->
          </template>
        </el-table-column>
      </el-table>
      <div class="footers">
        <div class="block">
          <el-pagination
            :current-page="currentPage4"
            :page-sizes="[100, 200, 300, 400]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="400"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,
      tableData: [
        {
          num: '3',
          name: 'jianmei-9300',
          peple: '张三',
          texts: '我想咨询下关于XX项目的具体要求。',
          phone: '189094888990',
          datas: ' 2020/10/20 20:03:00',
        },
        {
          num: '3',
          name: 'jianmei-9300',
          peple: '张三',
          texts: '我想咨询下关于XX项目的具体要求。',
          phone: '189094888990',
          datas: ' 2020/10/20 20:03:00',
        },
        {
          num: '3',
          name: 'jianmei-9300',
          peple: '张三',
          texts: '我想咨询下关于XX项目的具体要求。',
          phone: '189094888990',
          datas: ' 2020/10/20 20:03:00',
        },
        {
          num: '3',
          name: 'jianmei-9300',
          peple: '张三',
          texts: '我想咨询下关于XX项目的具体要求。',
          phone: '189094888990',
          datas: ' 2020/10/20 20:03:00',
        },
        {
          num: '3',
          name: 'jianmei-9300',
          peple: '张三',
          texts: '我想咨询下关于XX项目的具体要求。',
          phone: '189094888990',
          datas: ' 2020/10/20 20:03:00',
        },
        {
          num: '3',
          name: 'jianmei-9300',
          peple: '张三',
          texts: '我想咨询下关于XX项目的具体要求。',
          phone: '189094888990',
          datas: ' 2020/10/20 20:03:00',
        },
        {
          num: '3',
          name: 'jianmei-9300',
          peple: '张三',
          texts: '我想咨询下关于XX项目的具体要求。',
          phone: '189094888990',
          datas: ' 2020/10/20 20:03:00',
        },
      ],
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            },
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            },
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            },
          },
        ],
      },
      value1: '',
      value2: '',
    }
  },
  created() {},
  methods: {
    deleteRow(index, rows) {
      rows.splice(index, 1)
    },
  },
  beforeDestroy() {},
}
</script>

<style lang='scss' >
.guanli {
  width: 100%;
  height: 649px;
  .nas {
    height: 42px;
    margin: 20px 0px 22px 19px;

    display: flex;
    .lef {
      display: flex;
      width: 50%;
      height: 42px;
      .block {
        margin-right: 10px;
      }
    }
    .rgt {
      text-align: right;
      width: 42px;
      width: 50%;
      margin-right: 32px;
    }
  }
  .bales {
    width: 100%;
    .footers {
      width: 100%;
      margin-top: 38px;
      .block {
        width: 80%;
        margin: 0 auto;
        .el-pagination {
          width: 100%;
          text-align: center;
        }
      }
    }
  }
}
</style>
